<!-- 客户档案表单页面 -->
<template>
  <s-layout :title="pageTitle" :bgStyle="{ color: '#FFF' }">
    <view class="form-container">
      <form>
        <!-- 基本信息 -->
        <view class="form-section">
          <view class="section-title">基本信息</view>

          <!-- 客户姓名 -->
          <view class="form-item">
            <view class="form-label required">客户姓名</view>
            <input v-model="formData.customerName" :disabled="isViewMode" placeholder="请输入客户姓名"
                   class="form-input" maxlength="50" />
          </view>

          <!-- 性别 -->
          <view class="form-item">
            <view class="form-label">性别</view>
            <view class="ss-flex-col">
              <radio-group @change="onGenderChange" style="display: flex;" >
                <label
                  class="ss-flex ss-col-center ss-p-y-10"
                  style="margin-right: 20px;"
                  v-for="option in state.genderOptions"
                  :key="option.value"
                >
                  <radio
                    :value="option.value" :disabled="isViewMode"
                    :checked="formData.gender == option.value"
                    color="var(--ui-BG-Main)"
                    style="transform: scale(0.8)"
                  />
                  <view class="item-value ss-m-l-8">{{ option.label }}</view>
                </label>
              </radio-group>
            </view>

          </view>

          <!-- 出生日期 -->
          <view class="form-item">
            <view class="form-label">出生日期</view>
            <picker mode="date" :value="formatDateForPicker(formData.birthDate)"
                    :end="state.today"
                    :start="state.minBirthDate"
                    :disabled="isViewMode"
                    @change="onBirthDateChange">
              <view class="picker-input" :class="{ disabled: isViewMode }">
                {{ formatDisplayDate(formData.birthDate) || '请选择出生日期' }}
              </view>
            </picker>
          </view>

          <!-- 年龄 -->
          <view class="form-item">
            <view class="form-label">年龄</view>
            <input v-model.number="formData.age" :disabled="true" placeholder="根据出生日期自动计算"
                   class="form-input disabled" type="number" />
          </view>
        </view>

        <!-- 联系信息 -->
        <view class="form-section">
          <view class="section-title">联系信息</view>

          <!-- 联系电话 -->
          <view class="form-item">
            <view class="form-label required">联系电话</view>
            <input v-model="formData.contactPhone" :disabled="isViewMode" placeholder="请输入联系电话"
                   class="form-input" type="number" maxlength="11" />
          </view>

          <!-- 联系邮箱 -->
          <view class="form-item">
            <view class="form-label">联系邮箱</view>
            <input v-model="formData.contactEmail" :disabled="isViewMode" placeholder="请输入联系邮箱"
                   class="form-input" type="email" />
          </view>

          <!-- 联系地址 -->
          <view class="form-item">
            <view class="form-label">联系地址</view>
            <textarea v-model="formData.contactAddress" :disabled="isViewMode" placeholder="请输入联系地址"
                      class="form-textarea" maxlength="200" />
          </view>
        </view>

        <!-- 健康信息 -->
        <view class="form-section">
          <view class="section-title">健康信息</view>

          <!-- 疾病描述 -->
          <view class="form-item">
            <view class="form-label">疾病描述</view>
            <textarea v-model="formData.healthStatus" :disabled="isViewMode" placeholder="请输入疾病描述"
                      class="form-textarea" maxlength="500" />
          </view>

          <!-- 上传图片 -->
          <view class="form-item">
            <view class="form-label">上传图片（最多9张）</view>
            <view class="upload-container">
              <s-uploader
                v-model:url="formData.caseImages"
                :disabled="isViewMode"
                :delIcon="isAddMode"
                fileMediatype="image"
                limit="9"
                mode="grid"
                :imageStyles="{ width: '168rpx', height: '168rpx' }"
              />
            </view>
          </view>

          <!-- 干细胞剩余次数 -->
          <view class="form-item" v-if="state.mode!='add'">
            <view class="form-label"><text class="phone" @tap="showCustomerRecordDetail('STEM_CELL')">干细胞剩余次数</text><text class="phone"  @tap="openExosomeDetail(1)">查看明细</text></view>
            <view class="count-input-container">
              <input v-model.number="formData.remainingCount" :disabled="!isAddMode" placeholder="0"
                     class="form-input count-input " type="number" min="0" />
              <view class="count-buttons" v-if="!isViewMode && !isAddMode">
                <button type="button" class="count-btn count-btn-minus"
                        @tap="openChangeModal('remainingCount', 'decrease', '干细胞剩余次数')">
                  <text class="count-btn-text">-</text>
                </button>
                <button type="button" class="count-btn count-btn-plus"
                        @tap="openChangeModal('remainingCount', 'increase', '干细胞剩余次数')">
                  <text class="count-btn-text">+</text>
                </button>
              </view>
            </view>
          </view>

          <!-- 免疫细胞剩余次数 -->
          <view class="form-item" v-if="state.mode!='add'">
            <view class="form-label"><text class="phone"  @tap="showCustomerRecordDetail('IMMUNE_CELL')">免疫细胞剩余次数</text> <text class="phone" v-if="state.mode!='add'" @tap="openExosomeDetail(2)">查看明细</text></view>
            <view class="count-input-container">
              <input v-model.number="formData.immuneRemainingCount" :disabled="!isAddMode" placeholder="0"
                     class="form-input count-input " type="number" min="0" />
              <view class="count-buttons" v-if="!isViewMode && !isAddMode">
                <button type="button" class="count-btn count-btn-minus"
                        @tap="openChangeModal('immuneRemainingCount', 'decrease', '免疫细胞剩余次数')">
                  <text class="count-btn-text">-</text>
                </button>
                <button type="button" class="count-btn count-btn-plus"
                        @tap="openChangeModal('immuneRemainingCount', 'increase', '免疫细胞剩余次数')">
                  <text class="count-btn-text">+</text>
                </button>
              </view>
            </view>
          </view>

          <!-- 外泌体细胞剩余次数 -->
          <view class="form-item" v-if="state.mode!='add'">
            <view class="form-label"><text class="phone"  @tap="showCustomerRecordDetail('EXOSOME_CELL')" >外泌体细胞剩余次数</text>  <text class="phone" v-if="state.mode!='add'" @tap="openExosomeDetail(3)">查看明细</text></view>
            <view class="count-input-container">
              <input v-model.number="formData.exosomeRemainingCount" :disabled="!isAddMode" placeholder="0"
                     class="form-input count-input " type="number" min="0" />
              <view class="count-buttons" v-if="!isViewMode && !isAddMode">
                <button type="button" class="count-btn count-btn-minus"
                        @tap="openChangeModal('exosomeRemainingCount', 'decrease', '外泌体细胞剩余次数')">
                  <text class="count-btn-text">-</text>
                </button>
                <button type="button" class="count-btn count-btn-plus"
                        @tap="openChangeModal('exosomeRemainingCount', 'increase', '外泌体细胞剩余次数')">
                  <text class="count-btn-text">+</text>
                </button>
              </view>
            </view>
          </view>

          <!-- 全身体检剩余次数 -->
          <view class="form-item" v-if="state.mode!='add'">
            <view class="form-label"><text class="phone"  @tap="showCustomerRecordDetail('FULL_BODY_CHECK')">全身体检剩余次数</text> <text class="phone" v-if="state.mode!='add'" @tap="openExosomeDetail(4)">查看明细</text></view>
            <view class="count-input-container">
              <input v-model.number="formData.fullBodyCheckRemainingCount" :disabled="!isAddMode" placeholder="0"
                     class="form-input count-input " type="number" min="0" />
              <view class="count-buttons" v-if="!isViewMode && !isAddMode">
                <button type="button" class="count-btn count-btn-minus"
                        @tap="openChangeModal('fullBodyCheckRemainingCount', 'decrease', '全身体检剩余次数')">
                  <text class="count-btn-text">-</text>
                </button>
                <button type="button" class="count-btn count-btn-plus"
                        @tap="openChangeModal('fullBodyCheckRemainingCount', 'increase', '全身体检剩余次数')">
                  <text class="count-btn-text">+</text>
                </button>
              </view>
            </view>
          </view>

          <!-- 其他剩余次数 -->
          <view class="form-item" v-if="state.mode!='add'">
            <view class="form-label"><text class="phone"  @tap="showCustomerRecordDetail('OTHERS')">其他剩余次数</text> <text class="phone" v-if="state.mode!='add'" @tap="openExosomeDetail(5)">查看明细</text></view>
            <view class="count-input-container">
              <input v-model.number="formData.otherCheckRemainingCount" :disabled="!isAddMode" placeholder="0"
                     class="form-input count-input " type="number" min="0" />
              <view class="count-buttons" v-if="!isViewMode && !isAddMode">
                <button type="button" class="count-btn count-btn-minus"
                        @tap="openChangeModal('otherCheckRemainingCount', 'decrease', '其他剩余次数')">
                  <text class="count-btn-text">-</text>
                </button>
                <button type="button" class="count-btn count-btn-plus"
                        @tap="openChangeModal('otherCheckRemainingCount', 'increase', '其他剩余次数')">
                  <text class="count-btn-text">+</text>
                </button>
              </view>
            </view>
          </view>

        </view>

        <!-- 备注信息 -->
        <view class="form-section">
          <view class="section-title">备注信息</view>

          <!-- 备注 -->
          <view class="form-item">
            <view class="form-label">备注</view>
            <textarea v-model="formData.remark" :disabled="isViewMode" placeholder="请输入备注信息"
                      class="form-textarea" maxlength="500" />
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="form-actions" v-if="!isViewMode">
          <su-fixed bottom placeholder>
            <view class="ss-p-x-20 ss-p-b-40">
              <button class="loginout-btn ss-reset-button ui-BG-Main ui-Shadow-Main" @tap="handleSubmit"
                      :disabled="state.submitting">
                {{ state.submitting ? '保存中...' : (isEditMode ? '保存' : '添加') }}
              </button>
            </view>
          </su-fixed>
        </view>
        <view class="form-actions" v-if="isViewMode">
          <su-fixed bottom placeholder>
            <view class="ss-p-x-20 ss-p-b-40">
              <button class="loginout-btn ss-reset-button ui-BG-Main ui-Shadow-Main" @tap="getConsumeRecord">
                查看产品消耗记录
              </button>
            </view>
          </su-fixed>
        </view>

      </form>
    </view>

    <!-- 明细弹窗 -->
    <uni-popup ref="immunePopup" type="dialog" background-color="transparent">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">{{ state.productName || '免疫细胞详情' }}</text>
        </view>

        <view class="popup-body">
          <view v-if="state.immuneDetailList.length > 0">
            <view
              v-for="(item, index) in state.immuneDetailList"
              :key="index"
              class="detail-item"
            >
              <text class="spec">{{ item.archiveSpec }}</text>
              <text class="remain">{{ item.archiveStock }} 次</text>
            </view>
          </view>
          <view v-else class="empty-text">暂无数据</view>
        </view>

        <view class="popup-footer">
          <button class="popup-btn" @click="closePopup">我知道了</button>
        </view>
      </view>
    </uni-popup>

    <!-- 变更记录弹窗 -->
    <view class="change-modal-overlay" v-if="changeModal.visible" @tap="closeChangeModal">
      <view class="change-modal" @tap.stop>
        <view class="change-modal-header">
          <text class="change-modal-title">
            {{ changeModal.changeType === 'increase' ? '增加' : '扣除' }}{{ changeModal.fieldLabel }}
          </text>
        </view>

        <view class="change-modal-body">
          <!-- 当前次数 -->
          <view class="change-modal-item">
            <view class="change-modal-label">当前次数{{ changeModal.originalCount }} 次</view>
            <view class="change-modal-value" v-if="changeModal.changeAmount > 0">变更后次数{{ getPreviewCount() }} 次</view>
          </view>

          <!-- 变更数量 -->
          <view class="change-modal-item">
            <view class="change-modal-label required">变更数量</view>
            <input v-model.number="changeModal.changeAmount"
                   class="change-modal-input"
                   type="number"
                   :placeholder="changeModal.changeType === 'increase' ? '请输入增加数量' : '请输入扣除数量'"
                   min="1"
                   :max="changeModal.changeType === 'decrease' ? changeModal.originalCount : 999" />
          </view>

          <view class="change-modal-item" >
            <view class="change-modal-label">产品规格</view>
            <uni-data-select placement="top"
                             class="select-fixed"
                             v-model="changeModal.cellSpecification"
              :localdata="specificationListAll"
              placeholder="请选择产品规格"
            ></uni-data-select>
          </view>

        </view>

        <view class="change-modal-footer">
          <button class="change-modal-btn change-modal-btn-cancel" @tap="closeChangeModal">
            取消
          </button>
          <button class="change-modal-btn change-modal-btn-confirm"
                  @tap="confirmChange">
            确认
          </button>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import {
    onLoad
  } from '@dcloudio/uni-app';
  import {
    reactive,
    computed,
    watch,ref
  } from 'vue';
  import CustomerApi from '@/sheep/api/customer/customer';
  import DictApi from '@/sheep/api/system/dict';

  const formatDate = (date) => {
    const d = new Date(date);
    const month = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    return `${d.getFullYear()}-${month}-${day}`;
  };

  const state = reactive({
    mode: 'add', // add, edit, view
    productName: '',
    customerId: '',
    isvisible: false,
    submitting: false,
    genderOptions: [],
    immuneDetailList: [],
    today: formatDate(new Date()),
    minBirthDate: '1920-01-01', // 最小值
  });


  const formData = reactive({
    customerName: '',
    birthDate: '',
    age: null,
    gender: '',
    healthStatus: '',
    remainingCount: 0,
    exosomeRemainingCount: 0,
    fullBodyCheckRemainingCount: 0,
    immuneRemainingCount: 0,
    otherCheckRemainingCount: 0,
    caseImages: [],
    contactPhone: '',
    contactEmail: '',
    contactAddress: '',
    remark: '',
    changeRecords: [], // 变更记录数组
  });

  // 变更记录弹窗状态
  const changeModal = reactive({
    visible: false,
    fieldName: '',
    fieldLabel: '',
    changeType: '', // 'increase' | 'decrease'
    originalCount: 0,
    cellSpecification: '',
    changeAmount: null,
    reason: '',
  });

  // 计算属性
  const pageTitle = computed(() => {
    switch (state.mode) {
      case 'add':
        return '添加客户';
      case 'edit':
        return '编辑客户';
      case 'view':
        return '客户详情';
      default:
        return '客户档案';
    }
  });


  const openExosomeDetail = (value) => {
    uni.navigateTo({
      url: `/pages/customer/form/record?id=${state.customerId}&type=${value}`
    });
  }


  const isViewMode = computed(() => state.mode === 'view');
  const isEditMode = computed(() => state.mode === 'edit');
  const isAddMode = computed(() => state.mode === 'add');

  // 跳转到客户详情
  function getConsumeRecord() {
    uni.navigateTo({
      url: `/pages/customer/form/record?id=${state.customerId}`
    });
  }

  // 是否可以确认变更
  const canConfirmChange = computed(() => {
    if (!changeModal.changeAmount || changeModal.changeAmount <= 0) return false;
    if (changeModal.changeType === 'decrease' && changeModal.changeAmount > changeModal.originalCount) return false;
    return true;
  });

  // 监听出生日期变化，自动计算年龄
  watch(() => formData.birthDate, (newDate) => {
    if (newDate) {
      const birthYear = new Date(newDate).getFullYear();
      const currentYear = new Date().getFullYear();
      formData.age = currentYear - birthYear;
    } else {
      formData.age = null;
    }
  });

  // 打开变更记录弹窗
  function openChangeModal(fieldName, changeType, fieldLabel) {
    changeModal.visible = true;

    changeModal.fieldName = fieldName;
    changeModal.fieldLabel = fieldLabel;
    changeModal.changeType = changeType;
    changeModal.originalCount = formData[fieldName] || 0;
    changeModal.changeAmount = null;
    changeModal.cellSpecification = ''
    const productTypeValue = productType[changeModal.fieldLabel]
    let specification = ''
    switch (productTypeValue) {
      case 'STEM_CELL':
        specification = 'cell_specification_gift'
        break;
      case 'IMMUNE_CELL':
        specification = 'immunity_cell_gift_spec'
        break;
      case 'EXOSOME_CELL':
        specification = 'exosome_cell_gift_spec'
        break;
      case 'FULL_BODY_CHECK':
        specification = 'full_body_check_gift_spec'
        break;
      case 'OTHERS':
        specification = 'others_gift_spec'
        break;
    }
    if(!specification) return
    getSpecificationListAll(specification)
  }

  // 关闭变更记录弹窗
  function closeChangeModal() {
    changeModal.visible = false;
    changeModal.fieldName = '';
    changeModal.fieldLabel = '';
    changeModal.changeType = '';
    changeModal.originalCount = 0;
    changeModal.changeAmount = null;
  }

  // 获取预览的变更后次数
  function getPreviewCount() {
    if (!changeModal.changeAmount) return changeModal.originalCount;

    if (changeModal.changeType === 'increase') {
      return changeModal.originalCount + changeModal.changeAmount;
    } else {
      return changeModal.originalCount - changeModal.changeAmount;
    }
  }
  const productType = {
    '干细胞剩余次数': 'STEM_CELL',
    '全身体检剩余次数': 'FULL_BODY_CHECK',
    '外泌体细胞剩余次数': 'EXOSOME_CELL',
    '免疫细胞剩余次数': 'IMMUNE_CELL',
    '其他剩余次数':'OTHERS'
  }
  function getLabelByValue(value) {
    const entry = Object.entries(productType).find(([label, val]) => val === value)
    return entry ? entry[0] : ''
  }
  // 确认变更
  function confirmChange() {
    if(!changeModal.cellSpecification || changeModal.cellSpecification === '' ) {
      uni.showToast({
        title: '请选择产品规格',
        icon: 'error'
      });
      return
    }
    if(!changeModal.changeAmount || changeModal.changeAmount <= 0) {
      uni.showToast({
        title: '请输入变更数量',
        icon: 'error'
      });
      return
    }
    // 创建变更记录
    const changeRecord = {
      customerProfileId: formData.id,
      customerId: formData.customerId,
      remainingCount: changeModal.originalCount,
      productName:changeModal.fieldLabel,
      productType:productType[changeModal.fieldLabel],
      changeCount: changeModal.changeAmount,
      cellSpecification: changeModal.cellSpecification,
      changeType:changeModal.changeType === 'decrease' ? true : false
    };

    CustomerApi.addCustomerRecord(changeRecord).then(response => {
      if (response.code === 0) {
        // const newCount = getPreviewCount();
        // const oldCount = formData[changeModal.fieldName];
        // // 更新次数
        // formData[changeModal.fieldName] = newCount;
        getCustomerDetail();
        // 显示成功提示
        uni.showToast({
          title: `变更成功`,
          icon: 'success'
        });
      }
    })

    // 关闭弹窗
    closeChangeModal();
  }

  // 获取性别字典数据
  async function getGenderOptions() {
    try {
      let {
        code,
        data
      } = await DictApi.getDictDataListByType('system_user_sex');
      if (code === 0 && data) {
        state.genderOptions = data;
      }
    } catch (error) {
      console.error('获取性别字典失败:', error);
    }
  }
const immunePopup = ref(null)
  async function showCustomerRecordDetail(value) {
    let {
      code,
      data
    } = await CustomerApi.getCustomerRecordDetail({
      archiveId: state.customerId,
      productType: value,
      pageNo:1,
      pageSize:-1
    });
    state.immuneDetailList = data.list
    state.productName = getLabelByValue(value)
    immunePopup.value.open()
    state.isvisible = true
  }
  // 关闭弹窗
  const closePopup = () => {
    immunePopup.value.close()
  }
  // 获取客户详情
  async function getCustomerDetail() {
    if (!state.customerId) return;

    try {
      let {
        code,
        data
      } = await CustomerApi.getCustomerDetail({
        id: state.customerId
      });

      if (code === 0 && data) {
        // 确保数值字段不为null
        const processedData = {
          ...data,
          remainingCount: data.remainingCount || 0,
          immuneRemainingCount: data.immuneRemainingCount || 0,
          exosomeRemainingCount: data.exosomeRemainingCount || 0,
          fullBodyCheckRemainingCount: data.fullBodyCheckRemainingCount || 0,
          changeRecords: data.changeRecords || [], // 加载已有的变更记录
        };
        if(!processedData.caseImages) {
          processedData.caseImages = []
        }
        Object.assign(formData, processedData);
      } else {
        throw new Error('获取客户详情失败');
      }
    } catch (error) {
      console.error('获取客户详情失败:', error);
      uni.showToast({
        title: '获取客户信息失败',
        icon: 'error'
      });
    }
  }

  // 性别选择变化
  function onGenderChange(e) {
    formData.gender = e.detail.value;
  }

  // 选择日期后触发
  function onBirthDateChange(e) {
    const dateStr = e.detail.value // e.g. "2025-06-19"
    formData.birthDate = new Date(dateStr).getTime()
  }

  // 将时间戳格式化为 yyyy-MM-dd 显示
  function formatDisplayDate(timestamp) {
    if (!timestamp) return ''
    const date = new Date(timestamp)
    const y = date.getFullYear()
    const m = String(date.getMonth() + 1).padStart(2, '0')
    const d = String(date.getDate()).padStart(2, '0')
    return `${y}-${m}-${d}`
  }

  // picker 的 value 必须是 yyyy-MM-dd 格式
  function formatDateForPicker(timestamp) {
    return formatDisplayDate(timestamp)
  }

  // 表单验证
  function validateForm() {
    if (!formData.customerName.trim()) {
      uni.showToast({
        title: '请输入客户姓名',
        icon: 'error'
      });
      return false;
    }

    if (!formData.contactPhone.trim()) {
      uni.showToast({
        title: '请输入联系电话',
        icon: 'error'
      });
      return false;
    }

    // 验证手机号格式
    const phoneRegex = /^1[3-9]\d{9}$/;
    if (!phoneRegex.test(formData.contactPhone)) {
      uni.showToast({
        title: '请输入正确的手机号',
        icon: 'error'
      });
      return false;
    }

    // 验证邮箱格式（如果填写了邮箱）
    if (formData.contactEmail && formData.contactEmail.trim()) {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(formData.contactEmail)) {
        uni.showToast({
          title: '请输入正确的邮箱地址',
          icon: 'error'
        });
        return false;
      }
    }

    return true;
  }

  // 提交表单
  async function handleSubmit(e) {
    e.preventDefault();
    if (!validateForm()) return;

    state.submitting = true;

    try {
      let result;
      if (isAddMode.value) {
        result = await CustomerApi.addCustomer(formData);
      } else if (isEditMode.value) {
        result = await CustomerApi.updateCustomer({
          id: state.customerId,
          ...formData
        });
      }

      if (result.code === 0) {
        uni.showToast({
          title: isAddMode.value ? '添加成功' : '保存成功',
          icon: 'success'
        });

        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } else {
        throw new Error(result.message || '操作失败');
      }
    } catch (error) {
      console.error('提交表单失败:', error);
      uni.showToast({
        title: error.message || '操作失败',
        icon: 'error'
      });
    } finally {
      state.submitting = false;
    }
  }


  const specificationListAll = ref([])

  async function getSpecificationListAll(value) {
    let { code, data } = await DictApi.getDictDataListByType(value);
    if (code !== 0) {
      return;
    }
    if (data && data.length > 0) {
      specificationListAll.value = data.map((item) => ({
        value: item.value,
        text: item.label
      }));
    }
  }


  // 页面加载
  onLoad((options) => {
    if (options.mode) {
      state.mode = options.mode;
    }

    if (options.id) {
      state.customerId = options.id;
    }


    getGenderOptions();

    if (state.customerId && (state.mode === 'edit' || state.mode === 'view')) {
      getCustomerDetail();
    }
  });
</script>

<style lang="scss" scoped>
  /* 固定高度 */
  .select-fixed {
    height: 80rpx; /* 自己调整 */
    line-height: 80rpx;
  }
  :deep(.uni-select__selector-scroll) {
    max-height: 260rpx !important;
  }
    /* 弹窗外层 */
  .popup-content {
    width: 600rpx;
    background: #ffffff;
    border-radius: 24rpx;
    padding: 30rpx 40rpx;
    box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.15);
    animation: fadeIn 0.25s ease;
  }

  /* 头部标题 */
  .popup-header {
    text-align: center;
    margin-bottom: 20rpx;
  }

  .popup-title {
    font-size: 34rpx;
    font-weight: 600;
    color: #333;
  }

  /* 内容区域 */
  .popup-body {
    max-height: 500rpx;
    overflow-y: auto;
    margin-top: 10rpx;
  }

  .detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    border-radius: 12rpx;
    background-color: #f9fafb;
    margin-bottom: 16rpx;
    transition: all 0.2s;
  }

  .detail-item:hover {
    background-color: #f1f5f9;
  }

  .spec {
    color: #555;
    font-size: 28rpx;
  }

  .remain {
    color: #007aff;
    font-weight: 600;
  }

  /* 无数据提示 */
  .empty-text {
    text-align: center;
    color: #999;
    font-size: 28rpx;
    padding: 60rpx 0;
  }

  /* 底部按钮 */
  .popup-footer {
    margin-top: 20rpx;
    text-align: center;
  }

  .popup-btn {
    width: 300rpx;
    background: linear-gradient(90deg, #007aff, #00c6ff);
    color: #fff;
    font-size: 24rpx;
    border-radius: 10rpx;
    padding: 10rpx 0;
    border: none;
  }

  /* 弹入动画 */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(30rpx);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .form-container {
    padding: 30rpx;
  }
  .phone {
    margin-right: 30rpx;
    color: #007aff !important;
    text-decoration: underline;
  }
  .loginout-btn {
    width: 100%;
    height: 80rpx;
    border-radius: 40rpx;
    font-size: 30rpx;
  }

  .form-section {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  }

  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 30rpx;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid #f0f0f0;
  }

  .form-item {
    margin-bottom: 40rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .form-label {
    font-size: 24rpx;
    color: #333;
    margin-bottom: 20rpx;
    display: block;

    &.required::after {
      content: '*';
      color: #ff3b30;
      margin-left: 8rpx;
    }
  }

  .form-input {
    padding: 16rpx 20rpx;
    border: 2rpx solid #e0e0e0;
    border-radius: 12rpx;
    font-size: 24rpx;
    color: #333;
    background: #fff;
    transition: border-color 0.3s ease;

    &:focus {
      border-color: #007aff;
    }

    &:disabled,
    &.disabled {
      background: #f8f9fa;
      color: #999;
    }

    &::placeholder {
      color: #999;
    }
  }

  .form-textarea {
    min-height: 120rpx;
    padding: 16rpx 20rpx;
    border: 2rpx solid #e0e0e0;
    border-radius: 12rpx;
    font-size: 24rpx;
    color: #333;
    background: #fff;
    resize: none;
    transition: border-color 0.3s ease;

    &:focus {
      border-color: #007aff;
    }

    &:disabled {
      background: #f8f9fa;
      color: #999;
    }

    &::placeholder {
      color: #999;
    }
  }

  .picker-input {
    padding: 16rpx 20rpx;
    border: 2rpx solid #e0e0e0;
    border-radius: 12rpx;
    font-size: 24rpx;
    color: #333;
    background: #fff;

    &.disabled {
      background: #f8f9fa;
      color: #999;
    }
  }

  // 次数输入容器样式
  .count-input-container {
    display: flex;
    align-items: center;
    gap: 20rpx;
  }

  .count-input {
    flex: 1;
    text-align: center;
  }

  .count-buttons {
    display: flex;
    gap: 20rpx;
  }

  .count-btn {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);

    &:active {
      transform: scale(0.95);
    }
  }

  .count-btn-minus {
    background: #ff3b30;
    color: #fff;
  }

  .count-btn-plus {
    background: #007aff;
    color: #fff;
  }

  .count-btn-text {
    //line-height: 1;
    font-size: 24rpx;
  }

  // 变更记录弹窗样式
  .change-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 40rpx;
  }

  .change-modal {
    background: #fff;
    border-radius: 16rpx;
    width: 100%;
    max-width: 600rpx;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.3);
  }

  .change-modal-header {
    padding: 40rpx 40rpx 20rpx;
    border-bottom: 2rpx solid #f0f0f0;
  }

  .change-modal-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }

  .change-modal-body {
    padding: 40rpx;
    max-height: 50vh;
    overflow-y: auto;
  }

  .change-modal-item {
    margin-bottom: 40rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .change-modal-label {
    font-size: 24rpx;
    color: #333;
    margin-bottom: 20rpx;

    &.required::after {
      content: '*';
      color: #ff3b30;
      margin-left: 8rpx;
    }
  }

  .change-modal-value {
    font-size: 24rpx;
    color: #666;
    padding: 24rpx 0;

    &.preview {
      color: #007aff;
      font-weight: 600;
    }
  }

  .change-modal-input {

    padding: 12rpx 20rpx;
    border: 2rpx solid #e0e0e0;
    border-radius: 12rpx;
    font-size: 24rpx;
    color: #333;
    background: #fff;

    &:focus {
      border-color: #007aff;
    }

    &::placeholder {
      color: #999;
    }
  }

  .change-modal-textarea {
    width: 470rpx;
    height: 100rpx;
    padding: 16rpx 20rpx;
    border: 2rpx solid #e0e0e0;
    border-radius: 12rpx;
    font-size: 24rpx;
    color: #333;
    background: #fff;
    resize: none;

    &:focus {
      border-color: #007aff;
    }

    &::placeholder {
      color: #999;
    }
  }

  .change-modal-footer {
    padding: 20rpx 40rpx 40rpx;
    display: flex;
    gap: 30rpx;
    border-top: 2rpx solid #f0f0f0;
  }

  .change-modal-btn {
    flex: 1;
    //height: 80rpx;
    border-radius: 12rpx;
    font-size: 24rpx;
    border: none;
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
    }

    &:disabled {
      opacity: 0.6;
      transform: none;
    }
  }

  .change-modal-btn-cancel {
    background: #f8f9fa;
    color: #666;
  }

  .change-modal-btn-confirm {
    background: #007aff;
    color: #fff;

    &:disabled {
      background: #cccccc;
    }
  }

  .form-actions {
    display: flex;
    gap: 30rpx;
    margin-top: 60rpx;
    padding: 0 30rpx;
  }
</style>

